<template>
  <div class="app-container" style="width: 100%; background-color: #cff5f9; margin-top: 55px;margin-bottom: 20px;">
    <div class="filter-container" style="margin-top: 12px">
      <div class="class-header" style="border-top: 1px solid #d1dbe5; border-bottom: 1px solid #d1dbe5; background: #def4fb; margin-top: 5px;">
        <el-row :gutter="20" style="padding: 10px 178px 40px;">
          <el-col :span="6" style="border-right: 1px solid #909399">
            <p>流派</p>
            <el-row :gutter="20" style="text-align: center">
              <el-radio-group v-model="radio1"  size="mini">
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="1" style="padding: 0">古风</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="2" style="padding: 0">流行</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="3" style="padding: 0">民谣</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="4" style="padding: 0">电子</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="5" style="padding: 0">说唱</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="6" style="padding: 0">摇滚</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="7" style="padding: 0">金属</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="8" style="padding: 0">爵士</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="9" style="padding: 0">乡村</el-radio-button>
                </el-col>
              </el-radio-group>
            </el-row>
         </el-col>
         <el-col :span="6" style="border-right: 1px solid">
          <p>语种</p>
          <el-row :gutter="20" style="text-align: center">
              <el-radio-group v-model="radio1"  size="mini">
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="10" style="padding: 0">英语</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="11" style="padding: 0">中文</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="12" style="padding: 0">日语</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="13" style="padding: 0">韩语</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="14" style="padding: 0">小语种</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="15" style="padding: 0">粤语</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="16" style="padding: 0">法语</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="17" style="padding: 0">闽南语</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="18" style="padding: 0">德语</el-radio-button>
                </el-col>

              </el-radio-group>
            </el-row>
        </el-col>
      <el-col :span="6" style="border-right: 1px solid">
        <p>心境</p>
        <el-row :gutter="20" style="text-align: center">
              <el-radio-group v-model="radio1"  size="mini">
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="19" style="padding: 0">伤感</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="20" style="padding: 0">快乐</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="21" style="padding: 0">安静</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="22" style="padding: 0">励志</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="23" style="padding: 0">治愈</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="24" style="padding: 0">思念</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="25" style="padding: 0">甜蜜</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="26" style="padding: 0">寂寞</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="27" style="padding: 0">宣泄</el-radio-button>
                </el-col>
              </el-radio-group>
            </el-row>
      </el-col>
      <el-col :span="6" style="">
        <p>环境</p>
        <el-row :gutter="20" style="text-align: center">
              <el-radio-group v-model="radio1"  size="mini">
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="28" style="padding: 0">学习</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="29" style="padding: 0">咖啡馆</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="30" style="padding: 0">派对</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="31" style="padding: 0">工作</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="32" style="padding: 0">睡前</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="33" style="padding: 0">运动</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="34" style="padding: 0">酒吧</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="35" style="padding: 0">旅行</el-radio-button>
                </el-col>
                <el-col :span="8" style="padding-bottom: 24px;">
                  <el-radio-button label="36" style="padding: 0">舞蹈</el-radio-button>
                </el-col>

              </el-radio-group>
            </el-row>
      </el-col>
    </el-row>
      </div>
      <div class="class-body" style="margin: 10px 256px;">
        <el-table :data="tableData" stripe style="width: 100%;" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="name" label="歌名"></el-table-column>
          <el-table-column prop="singer" label="歌手"></el-table-column>
        </el-table>
      </div>
  </div>
  </div>
</template>

<script>
export default {
  name: "classfy",
  data() {
    return {
      radio1: '2',
      tableData: [
        {name: '笑红尘(男生版)', singer: 'Anson Swift'},
        {name: 'Peter Pan Was Right', singer: 'Tylor'},
        {name: 'I Love U ', singer: 'The Chain '},
        {name: 'Firework ', singer: 'Anme'},
        {name: 'Late Night Talking', singer: 'Harry Styles'},
      ]
    }
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val)
    },
    tableRowClassName({rowIndex}) {
        console.log(rowIndex)
      if (rowIndex % 2 === 1) {
        return 'warning-row';
      } else if (rowIndex % 2 === 0) {
        return 'success-row';
      }
      return 'warning-row';
    }
  }
}
</script>

<style>
  .el-table .warning-row {
    background: #e7f9fc;
  }

  .el-table .success-row {
    background: #bfeaf1;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: #e7f9fc
  }

  .el-radio-button:first-child:last-child .el-radio-button__inner {
    padding: 0;
  }

  .el-radio-button:first-child:last-child .el-radio-button__inner {
    /*b9e7ec*/
    color: #606266;
    /*border-color: #b9e7ec;*/
    border-color: rgb(222, 244, 251);
    font-size: 15px;
  }
  .el-radio-button {
    --el-radio-button-checked-bg-color: #b9e7ec;
  }

  .el-radio-button__inner {
    background: rgb(222, 244, 251);
  }
</style>